<!-- directive:title liuyp::块级元素你使用了opacity来做透明度的话 它会使子元素跟着也透明 -->
<!-- directive:breadcrumb 遇到的坑 -->
<div class="panel-body">
    <div class='panel panel-default'>
        <div class='panel-heading'> 遇到的坑 </div>
        <div class='panel-body'>
            <div class="row">
                <div class="col-sm-6">
                    <style media="screen" ui-bs>
                        .box1{ background: red; height: 100px; width: 150px; opacity:0.5; }
                    </style>
                </div>
                <div class="col-sm-6" style="background: #ddd;">
                    <div class="box1">
                        <div class="item1">123456</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    <div class='panel panel-default'>
        <div class='panel-heading'> 解决办法是使用rgba来做透明度，它将不会影响其子元素（完美）！ </div>
        <div class='panel-body'>
            <div class="row">
                <div class="col-sm-6">
                    <style media="screen" ui-bs>
                        .box2{ background: rgba(225,0,0,0.5); height: 100px; width: 150px; }
                    </style>
                </div>
                <div class="col-sm-6" style="background: #ddd;">
                    <div class="box2">
                        <div class="item1">123456</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
